import { Divider, Space } from 'antd'

const Card = ({ children, title }: any) => {
    return (
        <div className="card border rounded-md border-dark-50 p-4 m-2">
            <div className="card-content">
                <h1>{title}</h1>
                {children}
            </div>
        </div>
    );
}

const View: React.FC = () => {

    return (
        <>
            <Divider orientation="left">Props</Divider>

            <Space direction='vertical'>
                <Card title="Photo">
                    <img
                        className="avatar"
                        src="https://i.imgur.com/OKS67lhm.jpg"
                        alt="Aklilu Lemma"
                        width={100}
                        height={100}
                    />
                </Card>
                <Card title="About">
                    <p>Aklilu Lemma was a distinguished Ethiopian scientist who discovered a natural treatment to schistosomiasis.</p>
                </Card>
            </Space>

        </>
    )
}

export default View